<!-- 地图可视化 -->
<template>
  <div>
    <div ref="target" class="chart5"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { defineProps, onMounted, ref } from 'vue'
// 地图导入
import mapJson from '@/assets/mapData/china.json'

const props = defineProps({
  data: {
    typeof: Object,
    required: true,
  }
})

// 1. 初始化 echarts 实例
let mChart = null
const target = ref(null)

onMounted(() => {
  // 地图注册
  echarts.registerMap('china', mapJson)
  mChart = echarts.init(target.value)
  renderChart()
})

// 2. 构建 option 配置对象 
const renderChart = () => {
  const options = {
    // 时间轴
    timeline: {
      data: props.data.voltageLevel,
      axisType: 'category',
      autoPlay: true,
      playInterval: 3000,
      left: '10%',
      right: '10%',
      bottom: '0%',
      width: '80%',
      label: {
        normal: {
          textStyle: {
            color: '#ccc'
          }
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      symbolSize: 10,
      lineStyle: {
        color: '#555'
      },
      checkpointStyle: {
        borderColor: '#888',
        borderWidth: 2
      },
      controlStyle: {
        showNextBtn: true,
        showPrevBtn: true,
        normal: {
          color: '#666',
          borderColor: '#666'
        },
        emphasis: {
          color: '#aaa',
          borderColor: '#aaa'
        }
      }
    },
    // 基础配置
    baseOption: {
      grid: {
        top: '15%',
        right: '2%',
        bottom: '10%',
        width: '20%',
      },
      // 地图配置
      geo: {
        show: true,
        map: 'china',
        roam: true,
        zoom: 0.8,
        center: [113.83531246, 34.0267395887],
        itemStyle: {
          normal: {
            borderColor: 'rgba(147,235,248,1)',
            borderWidth: 1,
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0,
                color: 'rgba(147,235,248,0)',
              }, {
                offset: 1,
                color: 'rgba(147,235,248,.2)',
              }]
            }
          },
          emphasis: {
            areaColor: '#389bb7',
            borderWidth: 0,
            focus: 'self'
          },
        },
        tooltip: {
          trigger: "item",
        },
      }
    },
    // 动态配置
    options: []
  }

  // 遍历年份
  props.data.voltageLevel.forEach((item, index) => {
    options.options.push({
      backgroudColor: '#142037',
      title: [
        {
          text: '2019-2023 年度数据统计',
          left: '23%',
          top: '2%',
          textStyle: {
            color: '#fff',
            fontSize: 30
          }
        }, {
          id: 'statistic',
          text: item + '年度数据统计情况',
          right: '0%',
          top: '4%',
          textStyle: {
            color: '#ccc',
            fontSize: 20
          }
        }
      ],
      xAxis: {
        type: 'value',
        scale: true,
        position: 'top',
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 2,
          textStyle: {
            color: '#aaa'
          }
        }
      },
      yAxis: {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#ddd'
          }
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#ddd'
          }
        },
        data: props.data.categoryData[item].map(item => item.name)

      },
      series: [{
        type: 'bar',
        zlevel: 1.5,
        itemStyle: {
          normal: {
            color: props.data.colors[index]
          }
        },
        data: props.data.categoryData[item].map(item => item.value)
      },
      // 地图上的散点
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: props.data.topData[item],
        symbolSize: function (val) {
          return val[2] / 4
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: true,
          }
        },
        itemStyle: {
          normal: {
            color: props.data.colors[index],
            shadowBlue: 5,
            shadowColor: props.data.colors[index]
          }
        }
      }]
    })
  })
  // 3. 通过 实例.setOptions(option)
  mChart.setOption(options)

  // 让echarts根据浏览器大小改变动态该改变
  window.onresize = () => {//自适应大小
    mChart.resize()
  }
}

</script>
<style lang="less" scoped>
.chart5 {
  width: 100%;
  // height: 9.5625rem;
  height: 10.125rem;
  background-color: rgba(37, 99, 235, 0.2);
}
</style>